<template>
    <h3>理财显示列表</h3>
    借款名称
    <input type="text" v-model="Binfo.LMName" />
   利息
   <select v-model="Binfo.LXId">
                    <option value="">请选择</option>
                    <option v-for="item in Sinfo" :value="item.LXId">{{item.LXYear}}年{{item.LXName}}%</option>
                 
                </select>

    <input type="button" value="搜索" @click="Show">

    <br>
    <br>

    <table border="1">
        <thead>
            <tr>
                <th>理财编号</th>
                <th>理财名称</th>
                <th>年收益</th>
                <th>利息</th>
                <th>最低金额</th>
                <th>理财人次</th>
                <th>风险等级</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info">
                <td>{{item.LMId}}</td>
                <td>{{item.LMName}}</td>
                <td>{{item.LMYearPrice}}</td>
                <td>{{item.LXYear}}年{{item.LXName}}%</td>
                <td>{{item.LMMinPrice}}</td>
                <td>{{item.LMNum}}</td>
                <td>{{item.FengName}}</td>
            </tr>
        </tbody>
    </table>
    <span>
        <!-- 分页 -->
      <a href="#" @click="Pages(1)">首页</a>
      <a href="#" @click="Pages(Pinfo.PageIndex-1)">上一页</a>
      
        <a href="#" v-for="i in Pinfo.PageCount" @click="Pagesss(i)">{{i}}</a>
      <a href="#" @click="Pages(Pinfo.PageIndex+1)">下一页</a>
      <a href="#" @click="Pages(Pinfo.PageCount)">尾页</a>


       <!-- //指定页跳转 -->

      <input type="text" v-model="Pinfo.JumpPage" />
      <input type="button" value="跳转" @click="Pagess(Pinfo.JumpPage)" />
    
    </span>
</template>


<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios';
import { useRoute } from 'vue-router';


const route = useRoute();
onMounted(()=>{
    Bang();
    Show()
    Feng()
})

const Finfo=ref([
    {
        FengId:"",
        FengName:'',
    }
    ])

const Binfo=ref({
    LXId:'',
    LMName:'',
})

const Sinfo=ref([
    {
        LXId:"",
        LXYear:'',
        LXName:'',
    }
])

const info=ref([
    {
        LXId:'',
       LMId:'',
        LMName:'',
        LMYearPrice:'',
        LXYear:'',
        LXName:'',
        LMMinPrice:'',
        LMNum:'',
        FengName:'',
        FengId:'',
    }
    ])

const Pinfo=ref({
    PageIndex:1,
    PageSize:2,
    ListCount:0,
    PageCount:0,
    JumpPage:"",
})

const Feng=()=>{
    axios.get('http://localhost:2134/api/LMoney/BangDJ')
    .then(res=>{
        Finfo.value=res.data
    })
}
const Bang=()=>{
    axios.get('http://localhost:2134/api/LMoney/BangLX')
    .then(res=>{
       console.log(res.data)
        Sinfo.value=res.data
    })
}

const Pages=(i:number)=>{
    if(i>0&&i<=Pinfo.value.PageCount){
    Pinfo.value.PageIndex=i;
        Show();
    }
    else if(i<=0){
        alert("已经是第一页了")
    }
    else if(i>Pinfo.value.PageCount){
        alert("已经是最后一页了")
        
    }
}

const Pagess=()=>{
    if(Pinfo.value.JumpPage==""){
        alert("页码不为空")
        return;
    }
    Pinfo.value.PageIndex=Number(Pinfo.value.JumpPage);
    Show();
}


//显示

const Show=()=>{
    axios.get('http://localhost:2134/api/LMoney/ShowLMoney',{
        params:{
            LXId:Binfo.value.LXId,
            LMName:Binfo.value.LMName,

            PageIndex:Pinfo.value.PageIndex,
            PageSize:Pinfo.value.PageSize,
            
        }
    })
    .then(res=>{
        console.log(res.data.table);
        info.value=res.data.table;
        Pinfo.value.ListCount=res.data.ListCount;
        Pinfo.value.PageCount=res.data.PageCount;
    })
}

//显示页码方法
const Pagesss=()=>{
    let str='';
    for(let i=1;i<=Pinfo.value.PageCount;i++){
        str+=`<a href="javascript:;" onclick="Pages(${i})">${i}</a>`
    }
    document.getElementById("Page").innerHTML=str;
}



</script>